<template>
	<div class="w-9/12 mx-lg h-2xl my-sm ">
		<div
			class="relative left-0 top-0 w-12/12 h-12/12 bg-gray-200 radius-3xl"
		></div>
		<div class="relative left-xl top--10/12 row start-center">
			<Avatar
				:src="(nftUriBasePath + mainNftInfo.uri) | filterImg()"
				icon="ios-person"
			/>
			<b class="mx-sm">{{ mainNftInfo.name }}</b>
			<b class="mx-sm">{{ mainNftInfo.price }} HAIC</b>
		</div>
	</div>
</template>

<script>
import { OSSBASEPATH } from '@/config';
export default {
	props: ['mainNftInfo'],
	filters: {
		filterImg(url) {
			if (/(\.jpeg|\.png|\.jpg|\.gif)$/i.test(url)) {
				return url;
			} else {
				return '';
			}
		},
	},
	data() {
		return {
			nftUriBasePath: OSSBASEPATH,
		};
	},
};
</script>
